<template>
  <div class="root">
    <div ref="chart" class="chart" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
const tibetMapData = require("../../assets/tibet.json");
import { selectAllDepts } from "@/api/cockpit";

export default {
  data () {
    return {
      chart: null,
      dataList: []
    };
  },
  mounted () {
    this.$store.dispatch('app/toggleSideBar')
    this.getList()
  },
  methods: {
    // 查询
    async getList () {
      this.loading = true;
      const res = await selectAllDepts()
      this.loading = false;
      if (res.code === 200) {
        this.dataList = res.data
        this.init()
      } else {
      }
    },
    init () {
      echarts.registerMap("西藏", tibetMapData);
      let geoCoordMap = {}
      let mapData = []
      this.dataList.map(item => {
        geoCoordMap[item.deptName] = [item.lng, item.lat]
        mapData.push({
          name: item.deptName,
          value: {
            troops: item.cnt || 0, leader: item.leader, type: 1
          }
        })
      })
      this.chart = echarts.init(this.$refs.chart);
      this.chart.setOption({
        tooltip: {
          trigger: "item",
          renderMode: "html",
          className: "tooltip",
          formatter: function (params) {
            if (params.componentSubType === "effectScatter" && params.value[2].type === 1) {
              return `<div class="chen">${params.name}<br/>负责人：${params.value[2].leader}<br/>人数：${params.value[2].troops}</div>`;
            }
          },
        },
        geo: {
          map: "西藏",
          roam: false,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "#3b63ba",
              borderColor: "#00091a",
              shadowColor: "#00091a",
              shadowBlur: 20,
            },
          },
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            data: this.convertData(mapData, geoCoordMap).map((item) => {
              return {
                name: item.name,
                value: item.value,
              };
            }),
            symbolSize: 20,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#899ffa",
                shadowBlur: 10,
                shadowColor: "#899ffa",
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                show: true,
                areaColor: '#ffcc00',
                textStyle: {
                  color: "#fff",
                },
              },
            },
          },
          {
            name: "西藏",
            type: "map",
            selectedMode: false,
            mapType: "西藏",
            label: {
              normal: {
                textStyle: {
                  fontSize: 15,
                  fontWeight: "bold",
                  color: "#fff",
                },
              },
              emphasis: {
                areaColor: '#ffcc00',
                textStyle: {
                  color: "#fff", // 在鼠标移入时的文本颜色，这里设置为红色
                },
              },
            },
            //aspectScale: 1.75,
            zoom: 1.2,
            itemStyle: {
              normal: {
                label: { show: true },
                color: "#F4F4F4",
                borderWidth: 0.5,
                borderColor: "#080E1F",
                areaColor: "#3b63ba",
              },
              emphasis: {
                areaColor: '#ffcc00',
              },
            },
          },
        ],
      });

    },
    convertData (data, geoCoordMap) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value),
        });
      }
      return res;
    },
  },
};
</script>

<style scoped lang="scss">
.root {
  width: 100vw;
  height: calc(100vh - 84px);
  background-color: #032c49;
  padding: 18px;
  box-sizing: border-box;
}
</style>
